<template>
  <a-card :bordered="false">

    <a-row :gutter="8">
      <a-col :span="3">
        <!-- 加上 show-line 属性后，展开收起图标自动变成 +- 样式 -->
        <a-tree
          class="readRecords-tree"
          :tree-data="treeData"
          show-icon
          show-line
          :expandedKeys="treeExpandedKeys"
          :selectedKeys="[current]"
          @expand="handleTreeExpand"
          @select="handleTreeSelect"
        >
          <!-- 自定义子节点图标 :edit-config="{trigger: 'dblclick', mode: 'row'}" -->
          <a-icon slot="myIcon" type="unordered-list" style="color:#0c8fcf;"/>
        </a-tree>
      </a-col>
      <a-col :span="21">
        <div class="readNote">          
          <div>
            操作提示：可使用鼠标移至表格最左侧拖动排列，按顺序排序按钮，是自上而下递增排序号，亦可直接在顺序号列录入顺序号，最后必须保存才生效。 
          </div>
        </div>
         <meters-order-table ref="orderMeterTable"></meters-order-table>       
      </a-col>
    </a-row>

  </a-card>
</template>

<script>
  import { getAction, postAction } from '@api/manage'
  import moment from 'moment'
  import { pushIfNotExist, randomNumber, randomUUID } from '@/utils/util'
  import MetersOrderTable from './modules/MetersOrderTable'
  import { JVXETypes } from '@/components/jeecg/JVxeTable'

  // 【多种布局模板】左侧为树，右侧为行编辑
  export default {
    name: 'MeterOrderList',
    components: { MetersOrderTable },
    data() {
      return {
        // 是否正在加载
        loading: false,
        onedit: false,
        current: 1,
        currentKey: '',       
        
        // 选择的行
        selectedRows: [],
        // 数据源，控制表格的数据
        dataSource: [],
        // 列配置，控制表格显示的列     
        // 树的数据，这里模拟分页固定数据，实际情况应该是后台查出来的数据
        treeData: [],
        // 树展开的列，默认 1-10
        treeExpandedKeys: [],
        // 查询url地址
        url: {
          getData: '/mr/mrBookMeters/queryBookMaterOrder',
          getTreeData: '/mr/book/queryBook',
        },
      }
    },
    created() {
      this.loadTreeData()     
    },
    methods: {

      //加载树数据
      loadTreeData(){
         // 封装查询条件
        let formData = {         
          code: '402881a97ebab91e017ebad45b5d0002'
        }
        // 调用查询数据接口
        this.loading = true
        getAction(this.url.getTreeData, formData).then(res => {
          if (res.success) {
            // 后台查询回来的 total，数据总数量
            // this.pagination.total = res.result.total
            // 将查询的数据赋值给 dataSource               
            this.treeData = res.result;          
            // this.treeExpandedKeys.push(res.result[0].key);
            // this.current=res.result[0].key;
            // 重置选择
            this.selectedRows = []
          } else {
            this.$error({title: '查询失败', content: res.message})
          }
        }).finally(() => {
          // 这里是无论成功或失败都会执行的方法，在这里关闭loading
          this.loading = false
        })
      },
      /* 查询加载表格数据 */
      randomPage(bookId, loading = false) {
        if (loading) {
          this.loading = true
        }
       
        // 封装查询条件
        let formData = {         
          id: bookId
        }
        // 调用查询数据接口
        this.loading = true
        getAction(this.url.getData, formData).then(res => {
          if (res.success) {
            // 后台查询回来的 total，数据总数量
            // this.pagination.total = res.result.total
            // 将查询的数据赋值给 dataSource               
            this.dataSource = res.result;
           
            // this.dataSource.push(
            //   {customerId: '',  bookId: '', isPassed: '1',
            //     cusCode: '',cusName: '', addrees: '', mobile: '',
            //     beginScale: '', endScale: '', amount: '', }
            // );
            //this.r_read_num=0;
           
          } else {
            this.$error({title: '查询失败', content: res.message})
          }
        }).finally(() => {
          // 这里是无论成功或失败都会执行的方法，在这里关闭loading
          this.loading = false
        }) 
      },

      /* 查询加载表格数据 */
      readSubmit(row, loading = false) {
        if (loading) {
          this.loading = true
        }

        // 调用查询数据接口
        this.loading = true
        postAction(this.url.setManualData, row).then(res => {
          if (res.success) {  
            this.$message.success("提交成功!")
          } else {
            this.$error({title: '查询失败', content: res.message})
          }
        }).finally(() => {
          // 这里是无论成功或失败都会执行的方法，在这里关闭loading
          this.loading = false
        }) 
      },
      /* 查询加载表格数据 */
      readDelSubmit(row, loading = false) {
        if (loading) {
          this.loading = true
        }

        // 调用删除数据接口
        this.loading = true
        postAction(this.url.delManualData, row).then(res => {
          if (res.success) {  
            this.$message.success("删除成功!")
          } else {
            this.$error({title: '删除失败', content: res.message})
          }
        }).finally(() => {
          // 这里是无论成功或失败都会执行的方法，在这里关闭loading
          this.loading = false
        }) 
      },

      // 树被选择触发的事件
      handleTreeSelect(selectedKeys,e) {      
        let key = selectedKeys[0]

        if(e.selectedNodes[0].data.props.dataRef.children){
           this.treeExpandedKeys = selectedKeys
           
        }
        if(selectedKeys.length == 1){          
          //加载表格
          this.$refs.orderMeterTable.randomPage(key, true);         
        }
      },

      // 树被选择触发的事件
      handleTreeExpand(expandedKeys) {
        this.treeExpandedKeys = expandedKeys
      }, 

    },
  }
</script>

<style lang="less">
  /** 隐藏文件小图标 */
  .template-5-tree.ant-tree {
    li span.ant-tree-switcher.ant-tree-switcher-noop {
      display: none;
    }
  }
  .readNote{
    border: 1px solid #eeeff1;
    line-height:32px;
    padding: 0 50px;
    color: blue;
  }
</style>